<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">

    <title>考勤-成员</title>

    <link rel="stylesheet" href="../../../static/css/vendor/ion-fonts.css">
    <link rel="stylesheet" href="../../../static/css/vendor/bootstrap.min.css">
    <link rel="stylesheet" href="../../../static/css/style.css">
    <link rel="stylesheet" href="../../../static/test/ziy/common.css">
    <link rel="stylesheet" href="../../../static/test/attencev3/attencedetailv3.css">
    <link rel="stylesheet" href="../../../static/test/ziy/iconfont.css">
    <link rel="stylesheet" href="../../../static/test/ziy/layer.css">

<!--    <link href="../../../static/test/membercss/layer.css">-->
    <script src="../../../static/js/vendor/jquery-1.12.4.min.js"></script>
    <script src="../../../static/test/ziy/js/layer.js"></script>
    <script src="../../../static/js/vendor/popper.min.js"></script>





</head>

<body>

    <div class="main-wrapper">

        <header class="header-main_area">
            <div class="header-top_area">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="ht-left_area in-header return" style="height: 45px;">
                                <a class="return" style="top: 5px;" href="../attendance/attendance2.html" th:href="@{'/course/index/'+${session.course.id}}" >
                                    <span style="background:#fed100;color:#333333;">
                                        <i class="iconfont iconfanhui" style="color: black;"></i>
                                        <strong th:text="${session.course.name}">课堂考勤</strong>
                                    </span>
                                </a>
                            </div>
                        </div>

                        <div class="col-lg-8">
                            <div class="ht-right_area">
                                <div class="ht-menu">
                                    <ul>
                                        <li><a href="#"></a></li>
                                        <li><a href=""></a></li>
                                        <li><a href="/user/personal"><i class="ion-person"></i>个人中心</a></li>
                                        <li><a href="/doLogout"><i class="ion-log-out"></i>退出用户</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

    </div>


    <div class="perform-page-div">

        <div class="white-box">
            <div class="attend_admhd">
                <div class="admhdtop clearfix" style="position: relative;">
                    <div class="admhd_dis">

                        <p class="admhd_name textoverflow">第二次考勤</p>
                        <span class="editattencename">
		                    <i class="iconfont iconbianji"></i>
	                    </span>
                        <p class="admhd_date textoverflow">2019.06.27 &nbsp;10:23&nbsp;&nbsp;&nbsp;&nbsp; 数字考勤</p>
                    </div>
                    <div class="admhdtopright">
                        <div class="admhd_peoplenum">
                            <p class="admhd_peoplenumtop">
                                <span>17</span>
                            </p>
                            <p class="admhd_peoplenumfont">
                                出勤人数
                            </p>
                        </div>
                        <div class="admhd_rate">
                            <p class="admhd_ratetop">
                                <span>85</span>
                                <b>%</b>
                            </p>
                            <p class="admhd_ratefont">出勤率</p>
                        </div>

                    </div>

                </div>
            </div>
            <div class="perform-page2 clearfix" style="border-spacing: 20px;">
                <div style="box-sizing: border-box;vertical-align: top;">
                    <div class="attend_adetailmain">
                        <div class="admhdtab">
                            <ul>
                                <li class="attend_tab on" data-state="100">全部(<span class="attend_tab_count">20</span>)</li>
                                <li class="attend_tab " data-state="1">旷课(<span class="attend_tab_offcount">3</span>)</li>
                                <li class="attend_tab " data-state="0">出勤(<span class="attend_tab_attendcount">17</span>)</li>
                                <li class="attend_tab " data-state="2">迟到(<span class="attend_tab_latecount">0</span>)</li>
                                <li class="attend_tab " data-state="3">请假(<span class="attend_tab_parsecount">0</span>)</li>
                                <li class="attend_tab " data-state="7">早退(<span class="attend_tab_zaotuicount">0</span>)</li>
                            </ul>
                            <div class="searcharea">
                                <input type="text" placeholder="搜索" id="mouhu_search">
                                <a href="javascript:;" id="serach_student"></a>
                            </div>
                        </div>
                        <div class="adnhdsort">
                            <div class="attend_date_member ">
                                <a href="javascript:;" class="btn_sort btn_sort_member" data-sort="username">成员</a>
                                <a href="javascript:;" class="btn_sort btn_sort_stunum" data-sort="stno">学号</a>
                            </div>
                            <div class="attend_date_state">
                                <a href="javascript:;" class="btn_sort btn_sort_state down" data-sort="state">变更考勤</a>
                            </div>
                            <div class="attend_date_logtime">
                                <a href="javascript:;" class="btn_sort btn_sort_logtime" data-sort="studentattence_createtime">考勤时间</a>
                            </div>
                            <div class="attend_date_ip">
                                <a href="javascript:;" class="btn_sort btn_sort_ip" data-sort="ip">IP</a>
                            </div>
                            <div class="attend_date_gps">
                                <a href="javascript:;" class="btn_sort btn_sort_gps" data-sort="locationstate">定位</a>
                            </div>
                            <div class="attend_date_change">
                                <a href="javascript:;" class="btn_sort btn_sort_change" data-sort="logCount">变更记录</a>
                            </div>
                        </div>
                        <ul class="attend_date_lists">
                            <li class="attend_date_list" data-id="1">
                                <div class="attend_date_member textoverflow">

                                    <img src="./3.jpg" class="img_date_people_head" data-id="MDAwMDAwMDAwMLSGuaE" data-end="1">

                                    <span class="attend_date_member_name textoverflow" title="文强1">文强1</span>
                                    <span class="attend_date_member_num textoverflow" title="1001210653">1001210653</span>
                                </div>
                                <div class="attend_date_state " style="position: relative;">
                                    <a href="javascript:;" class="btn_changeattendstate">
                                        <img src="../../../static/test/ziy/img/ok.png">
                                    </a>
                                </div>
                                <div class="attend_date_logtime textoverflow">
                                    2019/06/27&nbsp;&nbsp;&nbsp;&nbsp;10:23
                                </div>
                                <div class="attend_date_ip textoverflow" title="不获取IP">--</div>
                                <div class="attend_date_gps textoverflow" style="font-size: 12px;" title="不获取GPS">--</div>

                                <!--如果学生发生考勤状态变更 则加1-->
                                <div class="attend_date_change textoverflow" style="font-size: 12px;">0</div>
                            </li>


                            <li class="attend_date_list" data-id="2">
                                <div class="attend_date_member textoverflow">

                                    <img src="./3.jpg" class="img_date_people_head" data-id="MDAwMDAwMDAwMLSGuaE" data-end="1">

                                    <span class="attend_date_member_name textoverflow" title="文强1">文强1</span>
                                    <span class="attend_date_member_num textoverflow" title="1001210653">1001210653</span>
                                </div>
                                <div class="attend_date_state " style="position: relative;">
                                    <a href="javascript:;" class="btn_changeattendstate">
                                        <img src="../../../static/test/ziy/img/ok.png">
                                    </a>
                                </div>
                                <div class="attend_date_logtime textoverflow">
                                    2019/06/27&nbsp;&nbsp;&nbsp;&nbsp;10:23
                                </div>
                                <div class="attend_date_ip textoverflow" title="不获取IP">--</div>
                                <div class="attend_date_gps textoverflow" style="font-size: 12px;" title="不获取GPS">--</div>

                                <!--如果学生发生考勤状态变更 则加1-->
                                <div class="attend_date_change textoverflow" style="font-size: 12px;">0</div>
                            </li>

                            <li class="attend_date_list" data-id="3">
                                <div class="attend_date_member textoverflow">

                                    <img src="./3.jpg" class="img_date_people_head" data-id="MDAwMDAwMDAwMLSGuaE" data-end="1">

                                    <span class="attend_date_member_name textoverflow" title="文强1">文强1</span>
                                    <span class="attend_date_member_num textoverflow" title="1001210653">1001210653</span>
                                </div>
                                <div class="attend_date_state " style="position: relative;">
                                    <a href="javascript:;" class="btn_changeattendstate">
                                        <img src="../../../static/test/ziy/img/off.png">
                                    </a>
                                </div>
                                <div class="attend_date_logtime textoverflow">
                                    2019/06/27&nbsp;&nbsp;&nbsp;&nbsp;10:23
                                </div>
                                <div class="attend_date_ip textoverflow" title="不获取IP">--</div>
                                <div class="attend_date_gps textoverflow" style="font-size: 12px;" title="不获取GPS">--</div>

                                <!--如果学生发生考勤状态变更 则加1-->
                                <div class="attend_date_change textoverflow" style="font-size: 12px;">0</div>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>

<div id="lay-changestate" class="del-pop">
    <p style="padding:20px 30px 0 30px;font-size:16px;line-height:50px;">变更记录 <span style="font-weight: 600;margin: 0 5px;font-size: 20px;">第二次考勤</span> 出勤状态</p>
    <div style="text-align:center;width:100%;padding:30px 0 50px 0;" id="btn_changestate">
        <span data-state="0" class="<%= state==0?'on':'' %>" >出勤 <img src="../../../static/test/ziy/img/ok.png"></span>
        <span data-state="1"  class="<%= state==1?'on':'' %>" style="margin-left:10px; margin-right:10px;">旷课<img src="../../../static/test/ziy/img/off.png"></span>
        <span data-state="2" class="<%= state==2?'on':'' %>"  style=" margin-right:10px;">迟到<img src="../../../static/test/ziy/img/late.png"></span>
        <span data-state="7"  class="<%= state==7?'on':'' %>" >早退 <img src="../../../static/test/ziy/img/zaotui.png"></span>
        <span data-state="3"  class="<%= state==3?'on':'' %>" >请假<img src="../../../static/test/ziy/img/parse.png"></span>
        <span data-state="4"  class="<%= state==4?'on':'' %>" date-parse="1" style="margin-left:10px; margin-right:10px;">事假 <img src="../../../static/test/ziy/img/parse1.png"></span>
        <span data-state="5"  class="<%= state==5?'on':'' %>" date-parse="2" style=" margin-right:10px;">病假 <img src="../../../static/test/ziy/img/parse2.png"></span>
        <span data-state="6"  class="<%= state==6?'on':'' %>" date-parse="3"  >公假 <img src="../../../static/test/ziy/img/parse3.png"></span>
    </div>
</div>

<script>
    //状态导航
    $(function () {
        $('.admhdtab li').click(function () {
            $(this).addClass('on').siblings().removeClass('on');

            //index== 0:全部 1：旷课 2：出勤 3：迟到 4：请假 5：早退：
            var index=$(this).index();

        })
    })
    // 更改状态图标导航
    $(function () {
        $('#btn_changestate span').click(function () {
            $(this).addClass('on').siblings().removeClass('on');

            //index== 0:全部 1：旷课 2：出勤 3：迟到 4：请假 5：早退：
            var index=$(this).index();

        })
    })
</script>


<script>
    //变更考勤
    $(document).on("click", ".btn_changeattendstate", function () {
        var id = $(this).parents(".attend_date_list").data("id");
        //最后的考勤状态
        var laststate = null;
        //该学生名字
        var stuname = "name11";
        var json = {stuname: stuname, state: laststate};
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            skin: "layer-ext-ding00",
            area: ["700px", "auto"],
            // content: template("lay-changestate", json),
            content: $("#lay-changestate"),
            btn: ["变更", "取消"],
            // success: function (layero) {
            //     this.layero = layero;
            //     var self = $(layero).find(".layui-layer-btn0");
            //     self.addClass("active")
            // },
            // yes: function (i) {
            //     var attenceid = $(".admhd_name").data("id");
            //     var changestate = $("#btn_changestate span.on").data("state");
            //     plugin.loading();
            //     layer.close(i);
            //     API.attenceApi_updateState(id, attenceid, changestate, function (data) {
            //         plugin.closeLoading();
            //         if (data.status == 1) {
            //             plugin.openMsg("变更成功", 0);
            //             ArrayUtil.alertByKeyValue(__LOCAL.attendstulist.lists, "uid", id, "state", changestate + "");
            //             ArrayUtil.alertByKeyValue(__LOCAL.attendstulist.lists, "uid", id, "logCount", parseInt(ArrayUtil.getValueByKeyValue(__LOCAL.attendstulist.lists, "uid", id, "logCount")) + 1);
            //             exports.databinding();
            //             for (var i = 0; i < __LOCAL.attendstulist.ppLists.length; i++) {
            //                 ArrayUtil.alertByKeyValue(__LOCAL.attendstulist.ppLists[i], "uid", id, "state", changestate + "")
            //             }
            //             var state = $(".attend_tab.on").data("state");
            //             drawstulistbystate(state)
            //         }
            //     })
            // }
        });

        // $("#btn_changestate").on("click", "span", function () {
        //     $("#btn_changestate span").removeClass("on");
        //     $(this).addClass("on")
        // })
    });
</script>


<script>
    //重命名
    $(document).on("click", ".editattencename", function () {
        var title = $(".admhd_name").html();
        layer.open({
            type: 1,
            skin: "layer-ext-ding00",
            title: "请输入考勤名称",
            area: ["450px"],
            content: '<input id="alterattencetitle" type = "text" value="' + title + '" placeholder="请输入考勤名称" style="width:90%;margin:0 20px;border:none;border-bottom:1px solid #328eeb;line-height:30px;"/>',
            btn: ["确定", "取消"],
            success: function (i) {
                $(i).find("input").on("input", function () {
                    var value = $.trim($(this).val());
                    if (value == "" || value == title) {
                        $(i).find(".layui-layer-btn0").removeClass("active")
                    } else {
                        $(i).find(".layui-layer-btn0").addClass("active")
                    }
                })
            },
            yes: function (i) {
                var attenceid = $(".admhd_name").data("id");
                var value = $.trim($("#alterattencetitle").val());
                API.attenceApi_renameAttence(attenceid, value, function (data) {
                    if (data.status == 1) {
                        layer.msg("修改成功");
                        $(".admhd_name").html(value)
                    }
                });
                layer.close(i)
            }
        });
        return false
    });
</script>


</body>

</html>

